import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
import { Component, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core';
// import { ToastService, UploadConfig } from 'ng-tui';
import { GlobalService, AuthService } from '../../../../cores/services';
import { ManageService } from '../../services/manage.service';
import { Manage } from '../../interfaces/manage.interface';
import { ActivatedRoute, Router } from '@angular/router';
import { Pagination, ConfirmService, ToastService, EChartService, Item, MapService, MapEvent} from 'ng-tui';
import { ApiData, SearchParams } from '../../../../cores/classes';
import { Goods } from '../../interfaces/manage.interface';
import { skipWhile, switchMap } from 'rxjs/operators';

@Component({
    templateUrl: './set.component.html',
    providers: [Location, { provide: LocationStrategy, useClass: PathLocationStrategy }],
})
export class SetComponent implements OnInit {
    @ViewChild('map') map: any;

    parentTypes = new Array<Item>();
    childTypes = new Array<any>();
    goodsThreeType = new Array<any>();
    goods: Goods = { id: 0, isActive: 1, goodsName: '' };
    optionPie = {
        color: ['#ff4255', '#ff9100', '#ffd900', '#2abd87', '#35d1a2', '#44b1c2', '#17a2b8'],
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['50%', '70%'],
                center: ['50%', '50%'],
                avoidLabelOverlap: false,
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [100, 200, 300, 400, 500]
            }
        ]
    };
    legendFir = [{ th: '总订单数' }, { th: '在途订单数' }, { th: '已送订单数' }, { th: '待发订单数' }];
    legendSec = [{ th: '订单总金额' }, { th: '实收金额' }, { th: '未收金额' }, { th: '压单金额' }];
    legendThree = [{ th: '实收总回款' }, { th: '实收回款' }, { th: '未收回款' }, { th: '压单回款' }];
    legendFour = [{ th: '在途车辆数' }, { th: '回途车辆数' }, { th: '回场车辆数' }];
    optionFir = {
        color: ['#ff4255', '#ff9100', '#ffd900', '#2abd87', '#35d1a2', '#44b1c2', '#17a2b8'],

        // title: {
        //     text: '订单',
        //     x: 'center'
        // },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
            //  formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // legend: {
        //     orient: 'vertical',
        //     left: 'left',
        //     data: ['总订单数', '在途订单数', '已送订单数', '待发订单数']
        // },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    { value: 335, name: '总订单数' },
                    { value: 310, name: '在途订单数' },
                    { value: 234, name: '已送订单数' },
                    { value: 135, name: '待发订单数' },
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    optionSec = {
        color: ['#ff4255', '#ff9100', '#ffd900', '#2abd87', '#35d1a2', '#44b1c2', '#17a2b8'],
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
            //  formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    { value: 335, name: '订单总金额' },
                    { value: 310, name: '实收金额' },
                    { value: 234, name: '未收金额' },
                    { value: 135, name: '压单金额' },
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    optionThree = {
        color: ['#ff4255', '#ff9100', '#ffd900', '#2abd87', '#35d1a2', '#44b1c2', '#17a2b8'],

        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
            //  formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    { value: 335, name: '实收总回款' },
                    { value: 310, name: '实收回款' },
                    { value: 234, name: '未收回款' },
                    { value: 135, name: '压单回款' },
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    optionFour = {
        color: ['#ff4255', '#ff9100', '#ffd900', '#2abd87', '#35d1a2', '#44b1c2', '#17a2b8'],
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
            //  formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    { value: 310, name: '回途车辆数' },
                    { value: 234, name: '已送订单数' },
                    { value: 135, name: '回场车辆数' },
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    mapStatus = false;
    consoleLog: { [key: string]: any } = {
        message: '点击对应按钮，获取调用结果'
    };
    get getChildTypes(): Item[] {
        return this.childTypes.filter(type => type.parentId === this.goods.goodsParentType);
    }
    get getThreeTypes(): Item[] {
        return this.childTypes.filter(type => type.parentId === this.goods.goodsParentType);
    }
    constructor(
        private activatedRoute: ActivatedRoute,
        private router: Router,
        private confirm: ConfirmService,
        private toast: ToastService,
        public global: GlobalService,
        private manageService: ManageService,
        private echart: EChartService,
        private mapService: MapService,
        private changeDetectorRef: ChangeDetectorRef

    ) { }

    // ngOnInit() {
    //     this.activatedRoute.url
    //         .pipe(skipWhile(() => this.router.url !== '/manage/account'))
    //         .subscribe(() => this.loadDatas());
    // }
    ngOnInit() {
        this.mapService.doFuc((AMap) => {
            this.mapStatus = true;
            this.map.setMarker([116.480983, 40.0958]);
            this.changeDetectorRef.detectChanges();
            // 添加自动补全插件
            AMap.plugin('AMap.Autocomplete', () => {
                return new AMap.Autocomplete({ input: 'search_input' });
            });
        });
    }
    getPointInfo(point: [number, number] = [116.396574, 39.992706]) {
        this.mapService.getAddressByPosition(point).subscribe(res => {
            this.consoleLog = res;
            // 这里的数据无法实时更新到视图中，需要手动刷新视图
            this.changeDetectorRef.detectChanges();
        });
    }
    getPosition(event: MapEvent) {
        const point: [number, number] = [event.lnglat.getLng(), event.lnglat.getLat()];
        console.log(point);
        // 解析坐标地址，通过经纬度获取真实地址
        this.getPointInfo(point);
        this.map.setMarker(point);
    }
}
